@import '@terminus/nusi-slim/es/style/index.less';

.ProcessMiningEngine {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 12px;
  box-sizing: border-box;
}

.leftPanel {
  width: 240px;
  border-right: 1px solid @middle-6;
  background: #fff;
  overflow: auto;
  transition: width 0.5s;

  &.leftPanelHidden {
    width: 0;
  }
}

.centerPanel {
  flex: 1;
  background: #fff;
  display: flex;
  flex-direction: column;
  position: relative;

  .centerPanelHeader {
    height: 48px;
    line-height: 48px;
    padding: 0 12px;
    border-bottom: 1px solid @middle-6;
    font-weight: 500;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    position: relative;

    .leftPanelToggle {
      position: absolute;
      width: 16px;
      height: 24px;
      left: -8px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 2px;
      background-color: #fff;
      box-shadow: 0px 0px 8px 0px rgba(26, 26, 24, 0.12);
      transition: transform 0.5s;

      &:hover {
        color: #5F95FF;
      }

      &.leftPanelToggleRotated {
        transform: translateY(-50%) rotate(180deg);
      }
    }

    .centerPanelTitle {
      flex: 1;
      display: flex;
      align-items: center;
    }
    
    .rightPanelToggle {
      cursor: pointer;
      position: absolute;
      width: 16px;
      height: 24px;
      right: -8px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 2px;
      background-color: #fff;
      box-shadow: 0px 0px 8px 0px rgba(26, 26, 24, 0.12);
      transition: transform 0.5s;

      &:hover {
        color: #5F95FF;
      }
      
      &.rightPanelToggleRotated {
        transform: translateY(-50%) rotate(180deg);
      }
    }

  }

  .centerPanelContent {
    flex: 1;
    display: flex;
  }
}

.rightPanel {
  width: 280px;
  overflow: hidden;
  border-left: 1px solid @middle-6;
  background: #fff;
  transition: width 0.5s;
  &.rightPanelHidden {
    width: 0px;
  }
}

